<template>
  <el-form :inline="true">
    <el-form-item v-for="(item, index) in searchBoxData" :key="index" :label="item.label">
      <!--input选项 -->
      <el-input v-if="item.e == 'input'" v-model="searchModel[item.name]" clearable placeholder="请输入"/>
      <!--select选项 -->
      <el-select v-if="item.e == 'select'" v-model="searchModel[item.name]" clearable placeholder="请选择">
        <el-option v-for="ite in item.opts" :key="ite.value" :label="ite.label" :value="ite.value"/>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="info" @click="query()">查询</el-button>
      <el-button type="warning" @click="clear()" v-show="false">清空</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  props: {
    searchBoxData: {
      type: Array,
      required: true,
      default() {
        // 设置默认值
        return {}
      }
    },
    searchModel: {
      type: Object,
      default() {
        // 设置默认搜索项
        var search_data = this.searchModel
        for (var index in this.searchdata) {
          var tmp = this.searchdata[index]
          var key = tmp.name
          var val = ''
          search_data[key] = val
        }
        return search_data
      }
    }
  },
  methods: {
    query() {
      // 调用父级事件,返回搜索项
      this.$emit('searchEvent', this.searchModel)
    },
    clear() {
      // 写清空事件
    }
  }
}
</script>
